import {forwardRef} from "@heroui/system";

import { Use{{capitalize componentName}}Props, use{{capitalize componentName}} } from "./use-{{componentName}}";

export interface {{capitalize componentName}}Props extends Use{{capitalize componentName}}Props {}

const {{capitalize componentName}} = forwardRef<"div", {{capitalize componentName}}Props>((props, ref) => {
  const {Component, domRef, children, styles, ...otherProps} =  use{{capitalize componentName}}({...props, ref});

  return (
    <Component ref={domRef} className={styles} {...otherProps}>
      {children}
    </Component>
  );
});

{{capitalize componentName}}.displayName = "HeroUI.{{capitalize componentName}}";

export default {{capitalize componentName}};
